<script setup>
import {nextTick, ref} from "vue";
import {Avatar, Bell, Location, School, Timer, User} from "@element-plus/icons-vue";
import {getLonginInfo, logout} from "../../api/home/home.js";
import router from "../../router/index.js";
import {getSchool} from "../../api/user/school.js";
import {isPermission} from "../../utils/utils.js";
import {getUser} from "../../api/user/user.js";

const activeName = ref('0')
const nowPath = router.currentRoute.value.path.split('/').pop();
if (nowPath === 'home') {
  activeName.value = '0'
} else if (nowPath === 'ai') {
  activeName.value = '1'
} else if (nowPath === 'video') {
  activeName.value = '2'
} else if (nowPath === 'practice') {
  activeName.value = '3'
} else if (nowPath === 'WebCode') {
  activeName.value = '4'
} else if (nowPath === 'comprehensive') {
  activeName.value = '5'
} else if (nowPath === 'toolBar') {
  activeName.value = '6'
}
// 权限
const type = ['学生', '家长', '老师']
const handleClick = (tab) => {
  // 获取tab下标
  const index = tab.index
  // 跳转到对应页面
  switch (index) {
    case '0':
      window.location.href = '/home'
      break
    case '1':
      window.location.href = '/student/ai'
      break
    case '2':
      window.location.href = '/student/video'
      break
    case '3':
      window.location.href = '/student/practice'
      break
    case '4':
      window.location.href = '/student/oj/WebCode'
      break
    case '5':
      window.location.href = '/student/space/information/comprehensive'
      break
    case '6':
      window.location.href = '/student/toolBar'
      break
  }
}
const loginInfo = ref({
  username: '',
  headerLink: '',
  role: '',
})
// 用户对象
const user = ref({})

function lineFloat() {
  // 获取标签
  var labels = document.querySelector('.tabs').querySelectorAll('.el-tabs__item');
  console.log(labels)
  // 获取下划线
  var line = document.getElementsByClassName('line')[0];
  //变量，记录下划线滑动的初始位置
  var initial = 40;
  // 变量，记录上一次下划线所在位置
  var star = 40;
  // 定时器名字
  var time;
  var initItem = labels[0];
  var lastItem = labels[labels.length - 1];
  // 先调用一个只触发一次的定时函数 让线移动到当前item
  // 转化为int类型
  let idx = parseInt(activeName.value)
  var nowItem = labels[idx];
  setTimeout(function(){
    if ( nowItem !== initItem ) {
      star = nowItem.offsetLeft + 49;
      line.style.width = nowItem.offsetWidth + 'px'
      clearInterval(time);
      animation(star, nowItem);
    }
  })
  // 遍历labels数组
  labels.forEach(function(item){
    // 给每个标签绑定点击事件
    item.onclick = function(){
      // 清除定时器
      clearInterval(time);
      // 给动画函数传值，itemsetLeft为该标签距离底层盒子左侧距离，就是终点值
      let goal = item.offsetLeft + 49;
      animation(goal,item);
      // 记录下来
      star = goal;
    }
    // 给每个标签绑定鼠标经过事件
    item.onmouseover= function(){
      // 一样的设置动画
      let goal = item.offsetLeft + 49;
      clearInterval(time);
      animation(goal,item);
    }
    // 给每个标签绑定鼠标离开事件
    item.onmouseout= function(){
      //清除定时器
      clearInterval(time);
      //下划线又回到起点
      animation(star,nowItem);
    }
  })
  // 动画
  function animation(goal,item){
    //动画初始位置为下划线距离左侧位置
    initial = line.offsetLeft + 49;
    if ( item === initItem ) {
      goal = 40;
    }
    if ( item === lastItem ) {
      goal += 10;
    }
    // 定时器，实现缓动动画，慢慢滑动的效果
    time = setInterval(function(){
      // 每次自增(goal-initial)/10，我为10，越小滑动越快
      initial += (goal-initial)/2;
      // 给下划线添加left定位
      line.style.left = initial +'px';
      line.style.width = item.offsetWidth + 'px'
      // 如果滑到目标值，清除定时器
      if(line.offsetLeft===goal){
        clearInterval(time);
      }
    },30)
  }
}
nextTick(() =>{
  lineFloat();
})


// 获取用户信息,并且存储用户权限
getLonginInfo().then(res => {
  loginInfo.value = res.data;
  console.log(loginInfo.value);
  localStorage.setItem('role', loginInfo.value.role);
  console.log()
  if (loginInfo.value.role === 1) {
    router.push("/parent");
  }
});


function logoutAccount() {
  logout()
  router.push("/auth/login")
}

function toSpace() {
  router.push('/student/space/information/comprehensive')
}

const handleGoInbox = () => {
  router.push("/student/space/inbox");
}
// 获取个人信息
const handleGetUser = async () => {
  await getUser().then((res) => {
    user.value = res.data;
    user.value.createTime = new Date(user.value.createTime).getFullYear();
  });
}
handleGetUser();

// 点击图标进入全屏
function fullShow() {
  if (document.webkitIsFullScreen) {
    document.webkitCancelFullScreen();
  } else {
    document.documentElement.webkitRequestFullScreen();
  }
}
</script>

<template>
  <!-- logo -->
  <div class="header-box">
    <div>
      <a href="/home">
        <img src="../../assets/image/logo.png" alt="logo" style="width: 40px; height: 40px">
      </a>
    </div>
    <div class="tabs">
      <!-- 跳转标签页 -->
      <el-tabs v-model="activeName" @tab-click="handleClick" class="tab-group">
        <el-tab-pane label="首页"></el-tab-pane>
        <el-tab-pane label="AI问答" ></el-tab-pane>
        <el-tab-pane label="视频学习"></el-tab-pane>
        <el-tab-pane label="自主练习"></el-tab-pane>
        <el-tab-pane label="在线OJ"></el-tab-pane>
        <el-tab-pane label="个人空间"></el-tab-pane>
        <el-tab-pane label="工具栏"></el-tab-pane>
      </el-tabs>
      <div class="line"></div>
    </div>
    <div style="display: flex;margin-left: auto;margin-right: 10px">
      <!--铃铛跳转收件箱-->
      <div style="display: flex; align-items: center;">
        <el-icon size="25" style="margin-right: 20px;cursor: pointer" @click="fullShow">
          <FullScreen/>
        </el-icon>
        <el-icon size="25" style="margin-right: 20px;cursor: pointer" @click="handleGoInbox">
          <Bell/>
        </el-icon>
        <el-popover
            placement="bottom-start"
            trigger="hover"
            :width="190"
        >
          <template #reference>
            <el-avatar :size="50" style="margin-left: auto; margin-right: 10px; cursor: pointer;"
                       :src="loginInfo.headerLink" :icon="User" @click="toSpace"/>
          </template>

          <template #default>
            <div style="display: flex;margin-left: auto;margin-right: 10px;">
              <el-avatar :size="50" :src="loginInfo.headerLink" :icon="User" @click="toSpace"/>
              <span style="font-size: 14px;margin-left: 20px">{{ loginInfo.username }}</span>
            </div>
            <div style="display: flex;align-items: center">

              <div class="information-tag">
                <div style="margin-bottom: 10px">
                  <span style="margin-right: 30px">身份:</span>
                  <el-tag type="info" size="large" >
                    <el-icon>
                      <Avatar/>
                    </el-icon>
                    {{ type[user.role] }}
                  </el-tag>
                </div>
<!--                <div v-if="user.address"  style="margin-bottom: 10px">-->
<!--                  <span style="margin-right: 30px">地址:</span>-->
<!--                  <el-tag type="info" size="large" >-->
<!--                    <el-icon>-->
<!--                      <Location/>-->
<!--                    </el-icon>-->
<!--                    {{ user.address }}-->
<!--                  </el-tag>-->
<!--                </div>-->
                <div>
                  <span>登录时间:</span>
                  <el-tag type="info" size="large" >
                    <el-icon>
                      <Timer/>
                    </el-icon>
                    {{ new Date(user.updateTime).toTimeString().slice(0, 8) }}
                  </el-tag>
                </div>
              </div>
            </div>

            <el-button type="primary" size="default" style="display:flex;margin-top: 10px;margin-left: 40px;border-radius: 14px" @click="logoutAccount">退出登录</el-button>
          </template>
        </el-popover>
      </div>

    </div>
  </div>
</template>

<style lang="less" scoped>
.header-box {
  display: flex;
  align-items: center;
  height: 100%;
  width: 1200px;
  margin: 0 auto;
  position: relative;

  .tabs {
    width: 100%;
    margin-top: 20px;
    position: relative;
    .tab-group {
      width: 80%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .line{
      position: absolute;
      bottom: 0;
      left: 40px;
      height: 3px;
      width: 52px;
      background-color: rgb(66, 104, 207);
      border-radius: 2px;
    }
  }
  /*去掉切换时el-tab-pane底部的蓝色下划线*/

  .tabs /deep/ .el-tabs__active-bar {
    background-color: transparent !important;
  }

  /*去掉tabs底部的下划线*/

  .tabs /deep/ .el-tabs__nav-wrap::after {
    position: static !important;
  }

  /*改变el-tabs的字体大小*/

  .tabs /deep/ .el-tabs__item {
    font-size: 16px;
  }
}

.information-tag {
  margin-top: 10px;
  margin-left: 10px;
}
</style>